<template>
    <div class="main">
        <div class="heal">.
            <div class="heal-left">
                <h1>饮食健康</h1>
                <p>早晨起床后喝一杯凉开水，有利于肝、肾代谢和降低血压，防止心肌梗
                    塞，有的人称之为“复活水”。有关专家认为，人经过几个小时睡眠后，消化道已排空，晨起饮一杯凉开水，能很快被吸收进入血液循环，稀释血液，等于对体内各器官进行了一次“内洗涤”。注意饮用水健康，水是生命之源。不要渴了才喝水。
                </p>
                <strong>了解更多</strong>
            </div>
            <div class="heal-right">
                <img src="../../assets/health/health-1.jpg" />
            </div>
            <div class="heal-left">
                <img src="../../assets/health/health-2.jpg" />
            </div>
            <div class="heal-right">
                <h1>饮食健康</h1>
                <p>其实果蔬除了对人体健康有利外，也因为果蔬中含有各种有机酸、芳香物质及各种色素成分，对调解人们的口味也有重要的意义，饮食中适当的搭配果蔬，人们就可以烹调出各种口味、色香味俱全的菜肴，这样，既达到了减肥保健的目的，又满足了口福，何乐而不为呢！
                </p>
                <strong>了解更多</strong>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped>
.main {
    margin-top: 20px;
    width: 100%;
}

.heal {
    height: 720px;
    width: 1150px;
    margin: 0 auto;
    padding: 10px 20px;
    border: 1px solid rgb(201, 201, 201);
}

.heal .heal-left {
    width: 40%;
    height: 370px;
    float: left;
}

.heal .heal-right {
    width: 50%;
    float: left;
    height: 370px;
    margin-left: 70px;
}

.heal .heal-left p,
.heal .heal-right p {
    margin-top: 20px;
    line-height: 30px;
}

.heal .heal-left strong,
.heal .heal-right strong {
    display: block;
    width: 140px;
    height: 36px;
    margin-top: 30px;
    line-height: 36px;
    color: white;
    text-align: center;
    background-color: rgb(172, 145, 90);
    /*背景颜色*/
}

.heals,
.heals ul {
    height: 380px;
    overflow: hidden;
}

.heals ul li {
    width: 400px;
    height: 380px;
    float: left;
}

.heals ul li .heals-info {
    display: flex;
    justify-content: space-around;
}

.heals ul li .heals-info .heals-span {
    width: 95px;
    height: 153px;
    color: white;
    font-size: 24px;
    text-align: center;
    line-height: 153px;
    background-color: rgb(172, 145, 90);
}

.heals ul li .heals-info .heals-wrpa {
    width: 270px;
    height: 153px;
}

.heals ul li .heals-info h3 {}

.heals ul li .heals-info p {
    margin-top: 15px;
    font-size: 14px;
    color: #999;
}

.heals ul li .heals-p {
    margin-top: 15px;
    font-size: 14px;
    color: #999;
}
</style>